<template>
	<uni-popup background-color="#fff" type="center" ref="popupRef">
		<view class="show-panel">
			<view class="show-title">设备划拨</view>
			<u-form class="form" labelPosition="left" :model="formData" :rules="rules" ref="formRef">
				<u-form-item class="form-item" label="划拨类型" labelWidth="80" prop="holder_type">
					<u-radio-group v-model="formData.holder_type" @change="holderTypeChange">
						<u-radio v-for="(item,index) in holderTypeList" :key="index" :name="item.value"
							:label="item.name" :disabled="item.disabled"></u-radio>
					</u-radio-group>
				</u-form-item>
				<template v-if="formData.holder_type==3">
					<u-form-item class="form-item" label="代理" labelWidth="80" prop="h_related_id">
						<cus-selects :closeSelect.sync="false" :data="agentList" :value="formData.agent_id"
							placeholder="请输入关键字搜索" @change="changeAgent" :clearable="true" :filterable="true"
							:searchType='1'></cus-selects>
					</u-form-item>
				</template>

				<template v-if="formData.holder_type==4">
					<u-form-item class="form-item" label="商户" labelWidth="80" prop="h_related_id">
						<cus-selects :closeSelect.sync="false" :data="storeList" :value="formData.store_id"
							placeholder="请输入关键字搜索" @change="changeStore" :clearable="true" :filterable="true"
							:searchType='1'></cus-selects>
					</u-form-item>
				</template>
			</u-form>

			<view class="footer">
				<view class="btn-group">
					<u-button class="btn" type="primary" size="normal" @click="allocate()">确认划拨</u-button>
					<u-button class="btn" type="info" size="normal" @click="handleClose()">取消划拨</u-button>
				</view>
			</view>
		</view>
	</uni-popup>
</template>

<script setup>
	import request from '@/utils/request';
	import cache from '@/utils/cache';
	import util from '@/utils/util';
	import {
		ref,
		reactive,
		toRefs,
		defineProps,
		onMounted,
		computed,
	} from 'vue';
	import cusSelects from '@/components/cus-selects-fan/cus-selects-fan.vue';

	defineOptions({
		name: 'allocate-view'
	});

	onMounted(() => {
		console.log('组件已挂载', props.data);
		initData();
	});

	const props = defineProps({
		data: {
			type: Array,
			default: [],
		},
	});

	const state = reactive({
		formData: {
			holder_type: 3,
			agent_id: 0,
			store_id: 0,
		}
	});

	const rules = ref([]);
	const formRef = ref(null);
	const holderTypeList = ref([{
		value: 3,
		name: '代理',
		disabled: false,
	}, {
		value: 4,
		name: '商家',
		disabled: false,
	}]);
	const agentList = ref([]);
	const storeList = ref([]);

	function initData() {
		getAgentList();
		getStoreList();
	}

	function getAgentList() {
		request.get('agent.agent/getAgentList').then(res => {
			console.log('代理列表', res);
			let data = res.data;
			data.forEach((item, index) => {
				agentList.value.push({
					text: 'ID:' + item.id + ',姓名:' + item.contact_name + ',手机:' + item
						.contact_phone,
					label: 'ID:' + item.id + ',姓名:' + item.contact_name + ',手机:' + item
						.contact_phone,
					value: item.id + ''
				});
			})
		})
	}

	function getStoreList() {
		request.get('agent.store/getStoreList').then(res => {
			console.log('商家列表', res);
			let data = res.data;
			data.forEach((item, index) => {
				storeList.value.push({
					text: item.id + '#' + item.store_name,
					label: item.id + '#' + item.store_name,
					value: item.id + ''
				});
			})
		})
	}

	function holderTypeChange(e) {
		console.log('划拨类型', e);
		state.formData.holder_type = e;
	}

	function changeAgent(e) {
		console.log('选择代理', e);
		state.formData.agent_id = e;
	}

	function changeStore(e) {
		console.log('选择商家', e);
		state.formData.store_id = e;
	}

	function allocate() {
		console.log('划拨', props.data);
		if (state.formData.holder_type == 3 && !state.formData.agent_id) {
			//代理
			util.showTip('请选择需要划拨的代理');
			return;
		}
		if (state.formData.holder_type == 4 && !state.formData.store_id) {
			//商家
			util.showTip('请选择需要划拨的商家');
			return;
		}

		state.formData.device_ids = props.data;
		request.post('agent.equipment/allocate', state.formData).then(res => {
			console.log('划拨结果', res);
			util.showTip(res.msg);
			if (res.code == 1) {
				setTimeout(() => {
					uni.navigateTo({
						url: '/agentPages/equipment-manage/equipment-manage'
					})
				}, 1000);
			}
		})
	}

	const popupRef = ref(null);

	function handleOpen() {
		popupRef.value.open();
	}

	function handleClose() {
		popupRef.value.close();
	}

	defineExpose({
		open: handleOpen,
		close: handleClose
	});

	const {
		formData,
	} = toRefs(state);
</script>

<style lang="scss" scoped>
	.show-panel {
		margin: 24rpx;

		.show-title {
			text-align: center;
		}

		.form {
			.form-item {}
		}

		.footer {
			.btn-group {
				display: flex;

				.btn {
					width: 160rpx;
				}
			}
		}
	}
</style>